/**
 * 开票
 */

/**
 * 验收
 */
'use strict';
import React from 'react';
import {connect} from 'dva/index';
import {Button, DatePicker, Form, Input, Modal, Popconfirm, Select, Table} from 'antd';
import FormBase from '../../components/Base/FormBase';
import moment from 'moment';
import 'moment/locale/zh-cn';
import styles from "../index.less";
import ViewTitle from "../../components/ViewTitle";
import {FormField, ModalView, SearchForm} from "antd-extra";
import ModalCreateOrEditInvoiceRecord from "./modal/ModalCreateOrEditInvoiceRecord";
import finance from "../../models/finance";

moment.locale('zh-cn');
const {RangePicker} = DatePicker;
const _ = require('lodash');

const title = '收票';
const type = 'invoicingReceipt';

@Form.create()
@connect(({
            user,
            global,
            dict,
            finance
          }) => ({...user, ...global, ...finance, ...dict}))
export default class XInvoicingReceipt extends FormBase {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {
    const {dispatch} = this.props;
    const payload = this.props.form.getFieldsValue();

    _.map(payload, (value, key) => {
      if (value === '') {
        payload[key] = undefined;
      }
    });
    payload['type'] = type;
    dispatch && dispatch({
      type: 'finance/findInvoiceRecords',
      payload
    });
    this.props.dispatch({
      type: 'dict/findMany',
      payload: {type: 'division'}
    });
  }

  cols() {
    return [
      {
        title: "供应商名称", dataIndex: 'name', key: 'name', render: (value, record) => {
          const {name, code} = record;
          return this.getProductionElement(code, name);
        }
      },
      {title: "开票公司", dataIndex: 'division', key: 'division'},
      {title: "开票金额", dataIndex: 'amount', key: 'amount'},
      {title: "发票号", dataIndex: 'invoiceNumber', key: 'invoiceNumber'},
      {
        title: "开票时间", dataIndex: 'createdTs', key: 'createdTs', render: value => {
          return <div>{moment(value).format('YYYY-MM-DD HH:mm:ss')}</div>;
        }
      },
      {
        title: '操作', dataIndex: 'operation', key: 'operation',
        width: 160,
        render: (value, record) => {
          return (
            <span>
              {<a style={{marginRight: '6px'}} onClick={() => {
                this.onCreateOrEdit(record);
              }}>编辑</a>
              }
              {<Popconfirm
                title="确认删除"
                onConfirm={() => {
                  this.props.dispatch({
                    type: 'finance/deleteInvoiceRecord',
                    payload: record
                  }).then(res => {
                    this.requestReturn(res);
                    this.componentDidMount();
                  });
                }}
                okText="是"
                cancelText="否"
              >
                <a style={{marginRight: '6px'}}>删除</a>
              </Popconfirm>}
            </span>
          );
        }
      }
    ];
  }

  getSearchFields = () => {
    const {divisionDict} = this.props;
    return [
      <FormField
        label="供应商名称"
        name="name"
        key={1}
      >
        <Input allowClear placeholder={`请输入供应商名称`}/>
      </FormField>,
      <FormField
        label={'采购公司'}
        name={`division`}
        key={`division`}
      >
        <Select allowClear placeholder={`请输入${title}`}>{this.getDivision(divisionDict)}</Select>
      </FormField>,
      <FormField
        label={`${title}时间`}
        name="createdTs"
        key={3}
        initialValue={[this.getSearchStart1Months(), this.getDefaultSearchEndDate()]}
      >
        <RangePicker allowClear={true}
          // style={{ width: '150%' }}
        />
      </FormField>
    ];
  };
  onCreateOrEdit = (record) => {
    const _type = record ? 'finance/updateInvoiceRecord' : 'finance/createInvoiceRecord';
    ModalView.open(ModalCreateOrEditInvoiceRecord, {
      title: record ? "编辑" : "添加",
      width: '1080px'
    }, {
      record,
      entityType:'供应商',
      callback: (payload) => {
        payload.type = type;
        this.props.dispatch({
          type:_type,
          payload
        }).then(res => {
          this.requestReturn(res);
          this.componentDidMount();
        });
      }

    });
  };

  render() {
    const {form, invoicingReceiptRecords = []} = this.props;

    return <Form className={styles.content}>
      <ViewTitle
        title={`${title}记录列表`}
        level={1}
        actions={<Button type={'primary'} onClick={() => this.onCreateOrEdit()}>添加</Button>}
      ></ViewTitle>
      <SearchForm
        style={{marginLeft: '6px', marginRight: '6px'}}
        onSearch={() => {
          this.state.current = 1;
          this.componentDidMount();
        }}
        onReset={this.handleReset}
        cols={3}
        min={6}
        expandText="展开"
        form={form}
      >
        {this.getSearchFields()}
      </SearchForm>

      <Table
        className={styles.antTable}
        bordered={true}
        columns={this.cols()}
        dataSource={invoicingReceiptRecords}
        // scroll={{ x: true }}
        pagination={true}
      ></Table>
    </Form>;
  }
}

